
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico"> 
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
     <link rel="stylesheet" href="__STATIC__/layout/css/channel.css" type="text/css">
    <style>
      .radio-inline input[type=radio] {
            margin-top: 4px
        }
    </style>
</head>

<body style="color:#333;overflow-x: auto;">
    <!-- 标题 -->
    <div class="page-heade">
      <h2 class="title_color text-center">日常费用预算使用报表(分科目汇总)</h2>
    </div>
    <!-- 标题 -->
     <div style="padding:3px;">
    <form action="" class="form-inline" id="f1" method="post">
      <table class="row-margin-top tab-content table-bordered table bud_hei" border="1">
          <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">部门：</label></td>
            <td>
              <!--部门-->
              <div class="bumen" >
                <div class="row">
                <input type="hidden" name="bumen" value="{$data.bumen}"/>
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="bumen"  value="">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      
                </div>
                <div class="duoxuan" id="selected_bumen" style="margin: 20px,0">
                    {volist name="bumenarr" id="vo"}
                    <span class="ren" data-id="{$vo.id}">{$vo.de_name}<span class="close">×</span></span>
                    {/volist}
                </div>
              </div>
              <!--部门-->
            </td>
        </tr>
         <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">费用科目维度：</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" class="kemu" name="kemu" {if $data.kemu==1}checked{/if} id="k1" value="1">一级费用科目
                  </label>
                    <label class="radio-inline">
                    <input type="radio" class="kemu" name="kemu" {if $data.kemu==2}checked{/if} id="k2" value="2">二级费用科目
                  </label>
                   <label class="radio-inline">
                    <input type="radio" class="kemu" name="kemu" {if $data.kemu==3}checked{/if} id="k3" value="3">三级级费用科目
                  </label>
              </div><br>
                <!--一级费用科目-->
              <div class="yijifeiyong" {if $data.kemu!=1}style="display:none"{/if}>
                <div class="row">
                <input type="hidden" name="yijifeiyong" value="{$data.yijifeiyong}"/>
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="yijifeiyong"  value="">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      
                </div>
                <div class="duoxuan" id="selected_yijifeiyong" style="margin: 20px,0">
                 {volist name="yijiarr" id="vo"}
                    <span class="ren" data-id="{$vo.id}">{$vo.title}<span class="close">×</span></span>
                    {/volist}
                </div>
              </div>
              <!--一级费用科目-->
               <!--二级费用科目-->
              <div class="erjifeiyong" {if $data.kemu!=2}style="display:none"{/if}>
                <div class="row">
                <input type="hidden" name="erjifeiyong" value="{$data.erjifeiyong}"/>
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="erjifeiyong"  value="">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      
                </div>
                <div class="duoxuan" id="selected_erjifeiyong" style="margin: 20px,0">
                 {volist name="erjiarr" id="vo"}
                    <span class="ren" data-id="{$vo.id}">{$vo.title}<span class="close">×</span></span>
                    {/volist}
                  
                </div>
              </div>
              <!--二级费用科目-->
               <!--三级费用科目-->
              <div class="sanjifeiyong" {if $data.kemu!=3}style="display:none"{/if}>
                <div class="row">
                <input type="hidden" name="sanjifeiyong" value="{$data.sanjifeiyong}"/>
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="sanjifeiyong"  value="">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      
                </div>
                <div class="duoxuan" id="selected_sanjifeiyong" style="margin: 20px,0">
                    
                    {volist name="sanjiarr" id="vo"}
                    <span class="ren" data-id="{$vo.id}">{$vo.title}<span class="close">×</span></span>
                    {/volist}
                  
                </div>
              </div>
              <!--三级费用科目-->
            </td>
        </tr>
          <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">考核期:</label></td>
            <td>
              <div style="padding: 2px;">
            <select name="cid" id="cid" class="form-control">
                          {volist name="cainian" id="c"}
                            <option value="{$c.id}" {if $c.id==$cid} selected {/if} >{$c.title}</option>
                          {/volist}
                      </select><span class="lr_5"></span>
                  	<div class="form-group">
						    <select name="k1id" id="k1id" class="select form-control">
                        <option value="0">请选择</option>
                        {volist name="kaohe1" id="c"}
                        <option value="{$c.id}" {if $c.id==$k1id} selected {/if} >{$c.title}</option>
                        {/volist}
                </select><span class="lr_5"></span>
                      <select name="k2id" id="k2id" class="select form-control">
                          <option value="0">请选择</option>
                        {volist name="kaohe2" id="c"}
                        <option value="{$c.id}" {if $c.id==$k2id} selected {/if} >{$c.title}</option>
                        {/volist}
                      </select>
                  	</div>
              </div>
            </td>
        </tr>
      <tr>
       <td colspan="2" class="text-center">
           <button class="btn btn-info query" >查询</button>
           <button class="btn btn-info emptyIf" type="button">清空查询条件</button>
           
            </td>
          </tr>
      </table>
    <p class="text-right">单位：人民币元</p>
   
      <table class="table table-hover table-bordered bud_hei table-striped bud_hei text-center">
                 <tr class="info">
                        <td>序号</td>
                        <td>部门</td>
                        <td>{$kaohedian.title}</td>
                        {volist name="kemuarr" id="ke"}
                        <td>{$ke.title}</td>
                        {/volist}
                        <td>小计</td>
                    </tr>
                    <tbody style="border:0">
                    {volist name="bumenarr" id="vo" key="k"}
                       <tr>
                        <td rowspan="4">{$k}</td>
                        <td rowspan="4">{$vo.de_name}</td>
                        <td>预算</td>
                        {volist name="$vo.ys" id="ys"}
                        <td class="ObjectNum text-right">{$ys}</td>
                        {/volist}
                        <td class="warning ObjectNum text-right">{$vo.zys}</td>
                      </tr>
                      <tr>
                        <td>申请金额</td>
                         {volist name="$vo.sy" id="ys"}
                        <td class="ObjectNum text-right">{$ys}</td>
                        {/volist}
                        <td class="warning ObjectNum text-right">{$vo.zsy}</td>
                      </tr>
                      <tr>
                        <td>申请/预算</td>
                         {volist name="$vo.sqz" id="ys"}
                        <td class="ObjectNum text-right">{$ys}</td>
                        {/volist}
                        <td class="warning ObjectNum text-right">{$vo.zsqz}</td>
                      </tr>
                      <tr>
                        <td>预算结余</td>
                         {volist name="$vo.jy" id="ys"}
                        <td class="ObjectNum text-right">{$ys}</td>
                        {/volist}
                        <td class="warning ObjectNum text-right">{$vo.zjy}</td>
                      </tr>
                      {/volist}
                    </tbody>
                     <tfoot>
                      <tr class="trTotal">
                        <td colspan="2" rowspan="4">合计:</td>
                        <td>预算</td>
                        {volist name="kemuarr" id="vo"}
                        <td class="ObjectNum text-right">{$vo.ys}</td>
                        {/volist}
                        <td class="ObjectNum text-right">{$zong.ys}</td>
                      </tr>
                      <tr class="trTotal">
                         <td>申请金额</td>
                        {volist name="kemuarr" id="vo"}
                        <td class="ObjectNum text-right">{$vo.sy}</td>
                        {/volist}
                        <td class="ObjectNum text-right">{$zong.sy}</td>
                      </tr>
                       <tr class="trTotal">
                        <td>申请/预算</td>
                       {volist name="kemuarr" id="vo"}
                        <td class="ObjectNum text-right">{$vo.sqz}</td>
                        {/volist}
                        <td class="ObjectNum text-right">{$zong.sqz}</td>
                      </tr>
                      <tr class="trTotal">
                        <td>预算结余</td>
                        {volist name="kemuarr" id="vo"}
                        <td class="ObjectNum text-right">{$vo.jy}</td>
                        {/volist}
                        <td class="ObjectNum text-right">{$zong.jy}</td>
                      </tr>
                    </tfoot>
              </table>
   
    
      
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!--统计代码，可删除-->
    <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
    <script src="__STATIC__/layout/js/common.js"></script>

    <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
    <script>
    $(".emptyIf").click(function(){
      location.href="{:url('rcys2')}"
    })
    $(".query").click(function(){
      var bumen=[];var i=0;
      $("#selected_bumen>.ren").each(function(){
        bumen[i]=$(this).attr("data-id")
        i++
      })
      bumen=bumen.join('-');
      $("[name='bumen']").val(bumen)

      var yijifeiyong=[];i=0;
      $("#selected_yijifeiyong>.ren").each(function(){
        yijifeiyong[i]=$(this).attr("data-id")
        i++
      })
      yijifeiyong=yijifeiyong.join('-');
      $("[name='yijifeiyong']").val(yijifeiyong)

      var erjifeiyong=[];i=0;
      $("#selected_erjifeiyong>.ren").each(function(){
        erjifeiyong[i]=$(this).attr("data-id")
        i++
      })
      erjifeiyong=erjifeiyong.join('-');
      $("[name='erjifeiyong']").val(erjifeiyong)

      var sanjifeiyong=[];i=0;
      $("#selected_sanjifeiyong>.ren").each(function(){
        sanjifeiyong[i]=$(this).attr("data-id")
        i++
      })
      sanjifeiyong=sanjifeiyong.join('-');
      $("[name='sanjifeiyong']").val(sanjifeiyong)

       document.getElementById("f1").submit()
    })
     $(".kemu").click(function(){
      var kid=$(".kemu:checked").val();
      if(kid==1){
        $(".yijifeiyong").show();
        $(".erjifeiyong").hide();
        $(".sanjifeiyong").hide();
      }else if(kid==2){
        $(".yijifeiyong").hide();
        $(".erjifeiyong").show();
        $(".sanjifeiyong").hide();
      }else if(kid==3){
        $(".yijifeiyong").hide();
        $(".erjifeiyong").hide();
        $(".sanjifeiyong").show();
      }
    })
    //一级搜索自动补全
    $("#yijifeiyong").bsSuggest({
        url: "{:url('select/yijifeiyongjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_yijifeiyong .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_yijifeiyong').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
    //三级搜索自动补全
    $("#sanjifeiyong").bsSuggest({
        url: "{:url('Richangbaoxiao/feiyongkemu3json')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_sanjifeiyong .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_sanjifeiyong').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
    //二级搜索自动补全
    $("#erjifeiyong").bsSuggest({
        url: "{:url('select/erjifeiyongjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_erjifeiyong .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_erjifeiyong').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
         // //关闭多选某一项
    $('body').on('click','.duoxuan .close',function () {
      var id=$(this).closest('.ren').attr("data-id");
      $("#tb>tr").each(function(){
        if($(this).attr("fid")==id){
          $(this).remove();
        }
      })
        $(this).closest('.ren').remove()
    })
       //产品品牌搜索自动补全
    $("#bumen").bsSuggest({
        url: "{:url('select/bumenjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_bumen .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_bumen').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
   $("#cid").change(function(){
    $("#k1id,#k2id").html("<option value='1'>请选择</option>")
    var cid=$(this).val();
      $.post("{:url('niantokao1')}",{cid:cid},function(re){
        var data=JSON.parse(re);
        for(var i=0;i<data.length;i++){
          $("#k1id").append("<option value='"+data[i]["id"]+"' >"+data[i]["title"]+"</option>")
        }
      })
   })
   $("#k1id").change(function(){
    $("#k2id").html("<option value='1'>请选择</option>")
    var k1id=$(this).val();
      $.post("{:url('kao1tokao2')}",{k1id:k1id},function(re){
        var data=JSON.parse(re);
        for(var i=0;i<data.length;i++){
          $("#k2id").append("<option value='"+data[i]["id"]+"' >"+data[i]["title"]+"</option>")
        }
      })
   })
        $(document).ready(function(){
          var $ObjectNum =$(".ObjectNum");
             toNum($ObjectNum);
        })
        /*请输入关键字或空格查询*/
var AgencyName =$("#AgencyName");
sousuo(AgencyName)
    function sousuo(id){
            id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

          }
    </script>
</body>

</html>
